<template>
  <div>
    <el-container>
      <el-main>
        <div class="enter-container">
          <div class="top-text">
            <i class="el-icon-edit-outline" /> 注册
          </div>
          <el-form ref="form" status-icon label-position="right" :model="form" :rules="rules" label-width="180px" @keyup.enter.native="submitForm">
            <el-form-item label="账号：" prop="userAccount">
              <el-input v-model="form.userAccount" placeholder="账号" />
            </el-form-item>
            <el-form-item label="真实姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="让大家能知道你~" />
            </el-form-item>
            <el-form-item label="密码：" prop="userPassword">
              <el-input v-model="form.userPassword" placeholder="密码" show-password />
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPass">
              <el-input v-model="form.checkPass" placeholder="确认密码" show-password />
            </el-form-item>
            <el-form-item label="队员状态：" prop="userRole" style="text-align: left">
              <el-radio v-model="form.userRole" label="1">现役队员</el-radio>
              <el-radio v-model="form.userRole" label="0">退役队员</el-radio>
            </el-form-item>
            <el-form-item label="学校" prop="userSchool" style="text-align: left">
              <el-input v-model="form.userSchool" placeholder="学校，比如河南大学" />
            </el-form-item>
            <el-form-item label="年级" prop="userGrade" style="text-align: left">
              <el-date-picker
                v-model="form.userGrade"
                type="year"
                value-format="yyyy"
                placeholder="年级，如2022级"
              />
            </el-form-item>
            <el-form-item label="邮箱：" prop="userEmail">
              <el-input v-model="form.userEmail" placeholder="这是找回密码的方式，请注意" />
            </el-form-item>
            <el-form-item label="验证码：" prop="code">
              <el-row>
                <el-col :span="14">
                  <el-input
                    v-model="form.code"
                    class="verify"
                    style="margin-right: 100px"
                    placeholder="右侧图形验证码"
                  />
                </el-col>
                <el-col :span="10">
                  <div class="login-code" @click="refreshCode">
                    <s-identify :identify-code="identifyCode" />
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="width: 240px; margin-bottom: 20px;" @click="submitForm">注册</el-button>
          <el-row>
            已经有账号？
            <el-link style="font-size: 16px !important;" :underline="false" type="primary" @click="jumpLogin">去登陆
            </el-link>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SIdentify from '@/components/SIdentify'
import { verifyMixin } from '@/common/mixins'
import { register } from '@/networks/enter'

export default {
  name: 'Register',
  components: { SIdentify },
  mixins: [verifyMixin],
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.userPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        userAccount: '',
        userPassword: '',
        checkPass: '',
        userName: '',
        userRole: '1',
        userEmail: '',
        code: '',
        userGrade: '',
        userSchool: ''
      },
      rules: {
        userAccount: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, validator: validatePass, trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    jumpLogin() {
      this.$router.push('/login')
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return false
        if (this.form.code !== this.identifyCode) {
          this.$message.error('验证码错误')
          this.refreshCode()
          return false
        }
        register(this.form).then(res => {
          if (res.data.status === 0) {
            this.$message.error(res.data.msg)
          } else {
            this.$message.success(res.data.msg)
            this.$router.push('/login')
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  .el-container {
    width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .el-main {
    text-align: center;
  }

  .el-row {
    line-height: 40px;
    margin-bottom: 20px;
  }

  .enter-container {
    min-height: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 600px;
    background-color: #ffffff;
  }

  .top-text {
    font-size: 30px;
    height: 150px;
    line-height: 150px;
  }

  .login-code {
    cursor: pointer;
  }

 div /deep/ .el-form-item__content {
    margin-right: 120px;
  }
</style>
